/* 
    学习目标：根据props动态初始化state
    需求：不同的Son组件，默认显示不同的内容

    实现方式两种：
    1. 👍简写的方式，通过this.props初始化state
    2. 完整的写法，通过constructor的形参，初始化state。注意super(props)是固定写法

  */

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        {/* 默认显示hello 777 */}
        <Son msg="hello 777"></Son>
        {/* 默认显示hello 888 */}
        <Son msg="hello 888"></Son>
        {/* 默认显示hello 666 */}
        <Son msg="hello 666"></Son>
      </div>
    );
  }
}

class Son extends React.Component {
  // 1. 完整的写法, 通过props形参，动态的接收msg，初始化state
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     msg: props.msg,
  //   };
  // }

  // 👍 推荐的写法：2. 简写的写法
  state = {
    msg: this.props.msg,
  };

  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
